<template>
	<view class="client">
		<view class="bar_top">
			<view class="search">
				<view class="search_input">
					<image src="/static/images/search.png" mode=""></image>
					<input type="text" v-model="search" placeholder="请输入关键词" />
					<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
				</view>
				<view class="search_btn" @tap="searchBtn()">搜索</view>
			</view>

			<view class="bar_list">
				<picker mode="selector" :range="item0" range-key="name" @change="getType">
					<view class="bar_item"  >
						<text >{{item0[type].name}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</picker>
				<picker mode="selector" :range="item1" range-key="name" @change="getCustomer">
					<view class="bar_item" >
						<text >{{item1[mode].name}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</picker>
				<picker mode="selector" :range="item2" range-key="name" @change="getBelong">
					<view class="bar_item"   v-if="checkPermission([10010])">
						<text  >{{item2[belong].name}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</picker>
			</view>

			<view class="bar_list">
				<picker mode="selector" :range="item3"   @change="getStatus">
					<view class="bar_item" >
						<text >{{item3[status]}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view>
				</picker>

				<picker mode="selector" :range="item4"  @change="getArea">
					<view class="bar_item" >
						<text >{{item4[area]}}</text>
						<image src="/static/images/bar_down.png"></image>
					</view> 
				</picker>
			</view>

		</view>

		<view class="user_list" v-show="!boxHide">
			<block v-for="(item,index) in list">
				<view class="user_item" @tap="go('info',item.id)" :key="index">
					<view>{{item.title}}</view>
					<image src="/static/images/right.png"></image>
				</view>
			</block>
		</view>

		<view class="bottom_btn">
			<view class="bottom_btn_list">
				<view @tap="open('addBoxStaus')">更多</view>
				<view @tap="go('search')">查重</view>
				<view @tap="go('add')" v-if="checkPermission([10001])">添加</view>
			</view>
		</view>

		<view class="window index999" v-if="addBoxStaus">
			<view class="bottom_popup">
				<!-- <view>导入</view> -->
				<view @tap="go()">附近客户</view>
				<view @tap="go('overdue')">逾期未回访</view>
				<view @tap="open('addBoxStaus')">取消</view>
			</view>
		</view>

		<view class="window index997" v-if="selBoxStatus">
			<view class="client_bg" @tap="open('selBoxStatus')"></view>
			<view class="client_sel">
				<block v-for="(item,index) in sel">
					<view class="client_sel_item" @tap="selItem(index)">
						<view>{{item.name}}</view>
						<image src="/static/images/select.png" v-if="item.status"></image>
					</view>
				</block>
			</view>
		</view>

		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../components/loading/loading.vue";
	export default {
		components: {
			Loading
		},
		data() {
			return {
				loading: true,
				addBoxStaus: false,
				selBoxStatus: false,
				itemNum: 0,
				boxHide: true,
				sel: [],
				item0: [{
					name: "所有类型",
					status: false
				}, ],
				item1: [{
						name: "全部客户",
						status: false
					},
					{
						name: "最近分配",
						status: false
					},
					{
						name: "今日回访客户",
						status: false
					},
					{
						name: "今日新增客户",
						status: false
					},
					{
						name: "未分类客户",
						status: false
					},
				], 
				item2: [
					{
						name: "自己",
						status: false,
						id:1
					},
					{
						name: "本部门",
						status: false,
						id:2
					}
					// {
					// 	name: "共享",
					// 	status: false,
					// 	id:3
					// },
				],
				item3:[], // 跟踪状态 
				item4:[], // 区域
				list: [],
				page: 1,
				search: "",
				mode: 0,
				belong: 0,
				type: 0,
				status:0,
				area:0,
				showEmptyBtn:false,
			} 
		},
		onLoad() {
			let branchType =this.$store.getters.userInfo.branch_type;
			
			if(branchType!=1){
				 this.item2 = [{
						name: "自己",
						status: false,
						id:1
					}]
			}

			this.$api.getClientTypeList({}).then(res => {
				for (let i in res) {
					let obj = {
						name: res[i],
						status: false
					}
					this.item0.push(obj)
				}
			})
			this.getStatusData();
			this.getAreaData();
		},
		onShow() {
			let branchType =this.$store.getters.userInfo.branch_type; 
			
			if(branchType!=1){
				 this.item2 = [{
						name: "自己",
						status: false,
						id:1
					}]
			}
			if (this.$app.globalData.upData.client) {
				this.getList(1);
			} else {
				this.boxHide = false
			}
		},
		onHide() {
			this.boxHide = this.$hideBox
		},
		onUnload() {
			this.$app.globalData.upData.client = true;
		},
		onReachBottom() {
			if (this.loading) {
				this.getList(3);
			}
		},
		methods: {
			emptyValue(){
				this.search='';
				this.getList(1);
			},
			open(obj, index, status) { //底部功能开关
				if (index != undefined) {
					if (index == this.itemNum && this[obj]) this[obj] = !this[obj];
					else this[obj] = status;
					this.sel = this["item" + index];
					this.itemNum = index;
				} else {
					this[obj] = !this[obj];
				}
			},
			// 获取类型
			getType(e){

				this.type = e.detail.value;

				this.getList(1);
			},
			// 获取客户
			getCustomer(e){

				this.mode = e.detail.value;
				this.getList(1);
			},
			getBelong(e){ // 属于
				this.belong = e.detail.value;
				this.getList(1);
			},
			getStatus(e){ // 获取状态

 				this.status = e.detail.value;
				this.getList(1);

			},
			getArea(e){ // 获取区域
				this.area = e.detail.value;
				this.getList(1);

			},
			selItem(index) { //选择分类栏
				this.open("selBoxStatus");
				let arr = this['item' + this.itemNum];
				for (let i in arr) {
					if (i == index) {
						arr[i].status = true;
					} else {
						arr[i].status = false;
					}
				}
				console.log(index)
				this.itemNum == 0 ? this.type = index : this.itemNum == 1 ? this.mode = index : this.belong = index
				this.getList(1);
			},
			go(obj, kid) { //页面跳转
				if (obj == undefined || obj == 'overdue') {
					uni.showToast({
						title: "开发中~",
						icon: "none"
					});
					return;
				}
				if (this.addBoxStaus) this.addBoxStaus = !this.addBoxStaus
				uni.navigateTo({
					url: "/pages/client/" + obj + "/" + obj + "?kid=" + kid
				})
			},
			getList(type) {
				this.$refs.load.initLoading({
					loadType: type
				}).then(res => {
					this.boxHide = false;
					if (type == 1) {
						this.list = [];
						this.page = 1;
						this.loading = true;
						this.$app.globalData.upData.client = false
					}
					let upJson = {
						class: 1,
						search: this.search,
						page: this.page,
						belong:this.item2[this.belong].id,
						user_id:uni.getStorageSync("userId")
					}
					if (this.mode > 0) upJson.mode = this.mode
					if (this.belong > 0) upJson.belong = this.item2[this.belong].id
					if (this.type > 0) upJson.type = this.type==0?'':this.item0[this.type].name
					if (this.status > 0) upJson.status = this.item3[this.status];
					if (this.area > 0) upJson.customer_area = this.item4[this.area];

					this.$api.getClientList(upJson).then(res => {
						this.$refs.load.getLoadingData({
							oldData: this.list,
							newData: res.data
						}).then(res => {
							this.list = res.list;
							this.loading = res.loading;
							this.page++;
						});
					})
				})
			},
			searchBtn(){//搜索
				this.getList(1);
			},
			// 获取状态数据
			getStatusData(){

				this.$api.getTrackStatusList({}).then(res =>{
					this.item3 = res;
					this.item3.splice(0,0,"跟踪状态")
				})

			},
			// 获取区域数据
			getAreaData(){
				this.$api.getRegionList({}).then(res =>{
					this.item4 = res;
					this.item4.splice(0,0,"全部区域")
				})

			}
		},
		watch:{
			search(val){
				this.showEmptyBtn=val==""?false:true;
			}
		}
	}
</script>

<style>
	.client {
		padding-bottom: 90upx;
	}

	.user_list {
		margin-top: 298upx;
	}

	.user_item>image:nth-child(2) {
		width: 12rpx;
		height: 24rpx;
		margin-left: auto;
	}

	.client_bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
	}

	.client_sel {
		width: 100%;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		top: 198rpx;
	}

	.client_sel_item {
		width: 690upx;
		padding: 0 40upx;
		height: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 30upx;
		color: #333333;
	}

	.client_sel_item image {
		width: 30upx;
		height: 20upx;
	}
</style>
